<template>
	<view class="payment-container">
		<view class="textTitleTop" v-if="latestRecords?.status==4&&latestRecords?.payInfoReasonFlag==1">审核意见：{{latestRecords?.applyStudioProgressVos[0].payInfoReason}}</view>
		<view class="company-info">
			<view class="info-item">
				<text class="label">转款金额</text>
				<text class="value-box">￥{{bankConfig.money}}</text>
			</view>
		</view>
		<view class="company-info">
			<view class="section-title">公司账户信息</view>
			<view class="info-item">
				<text class="label">开户名称</text>
				<view class="value-box">
					<text class="value">{{bankConfig.account}}</text>
					<text class="copy-icon" @click="copyText(String(bankConfig.account))">复制</text>
				</view>
			</view>
			<view class="info-item">
				<text class="label">银行账号</text>
				<view class="value-box">
					<text class="value">{{bankConfig.accountNumber}}</text>
					<text class="copy-icon" @click="copyText(String(bankConfig.accountNumber))">复制</text>
				</view>
			</view>
			<view class="info-item">
				<text class="label">开户银行</text>
				<text class="value-box">{{bankConfig.bank}}</text>
			</view>
			<view class="info-item">
				<text class="label">转款备注</text>
				<text class="value-box">{{bankConfig.remarks}}</text>
			</view>
		</view>
		<view class="payment-form">
			<view class="lf lf-between xjs-mb-24">
				<view class="payment-form-left">上传打款截图</view>
				<view class="payment-form-right" @tap="openExampleImg">查看示例</view>
			</view>
			<!-- <view class="form-item">
				<text class="label">打款账号：</text>
				<input v-model="info.paymentAccount" maxlength="30" class="input" type="number" placeholder="请输入打款银行账号"
					placeholder-class="u-color-192" placeholder-style="color:#b2b2b2"  />
			</view> -->
			<view class="form-item">
				<text class="label">打款时间：</text>
				<picker class="input" mode="date" :value="info.paymentTime" @change="bindDateChange">
					<view :class="info.paymentTime?'':'u-color-192'">{{info.paymentTime?info.paymentTime:'请选择打款时间'}}</view>
				</picker>
				<!-- <input v-model="info.paymentTime" class="input" type="time" placeholder="请选择打款时间"
					placeholder-class="placeholder" /> -->
			</view>
			<view class="form-item">
				<text class="label">备注信息</text>
				<textarea maxlength="100" v-model="info.remark" class="textarea" placeholder="请输入备注信息"
					placeholder-class="u-color-192" placeholder-style="color:#b2b2b2" />
			</view>
		</view>
		<view class="upload-section">
			<view class="section-title">上传付款凭证</view>
			<upload v-model="info.picList" :sourceType="['album', 'camera']"
				uploadUrl="/api/mall/order-service-daily/uploadCoverPic">
			</upload>
			<view class="upload_tips">上传凭证，最多9张。</view>
		</view>
		<view @click="info.submit" class="xjs-btn-primary">提交付款信息</view>
		<uni-popup ref="popupRef" type="center" background-color="#fff" :is-mask-click="false" border-radius="32rpx">
			<view>
				<view class="reviewFailed">
					<image src="https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-11.png"></image>
					<view class="failed_text">您还需修改以下信息。</view>
					<view class="failed_label_box">
						<view class="failed_one_label xjs-pl-24 failed_one_label_bottom">
							<view class="failed_one_label_left">类型</view>
							<view class="failed_one_label_center xjs-ml-24">意见</view>
							<view class="go_modify_text"><text>操作</text></view>
						</view>
						<view class="failed_one_label xjs-pl-24">
							<view class="failed_one_label_left">申请信息</view>
							<view class="failed_one_label_center xjs-ml-24">{{latestRecords?.applyStudioProgressVos[0].applicationInfoReason}}</view>
							<view @tap="againBtn" class="go_modify"><text>去修改</text>
							<uni-icons type="right" color="#FF6084" size="12"></uni-icons>
							</view>
						</view>
	<!-- 					<view class="failed_two_label xjs-pl-24" v-if="latestRecords.payInfoReason">
							<view class="failed_two_label_left">{{latestRecords.payInfoReason}}</view>
							<view  @tap="uploadPayment" class="go_modify"><text>去修改</text>
							<uni-icons type="right" color="#FF6084" size="12"></uni-icons>
							</view>
						</view> -->
					</view>
					<view @click="goBack" class="xjs-btn-primary goBack">返回详情</view>
				</view>
			</view>
			
		</uni-popup>
	</view>
</template>
<script lang="ts" setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref, reactive } from 'vue';
	import api from '@/api'
	import { useUserStoreToRefs } from '@/store/useUserStore'
	const { userInfo } = useUserStoreToRefs()
	const popupRef = ref()
	const latestRecords = ref()
	onLoad((e) => {
		info.id = e.id
		getBankConfig()
		getLatestRecordsByUserId()
		
	})
	const bankConfig = ref<any>({})
	
	const getLatestRecordsByUserId = async () => {
		const res : any = await api({
			method: 'get',
			url: '/mall/studio/apply-studio-record/getLatestRecordsByUserId'
		})
		console.log(res)
		latestRecords.value = res.data
	}
	const getBankConfig = async () => {
		const res : any = await api({
			method: 'get',
			url: '/mall/content/backend-configs/xjsPetAccountNumber'
		})
		console.log(res)
		bankConfig.value = res.data
	}
	const copyText = (text : string) => {
		uni.setClipboardData({
			data: text,
			success: () => {
				uni.showToast({
					title: '复制成功',
					icon: 'success'
				});
			}
		});
	};
	const bindDateChange = (e: string)=> {
		info.paymentTime = e.detail.value
	}
	const againBtn = () => {
		uni.navigateTo({
			url: `/pages/applyPetTeacher/submitInfo/submitInfo?recordId=${latestRecords.value.id}`
		})
	}
	const openExampleImg = () => {
		uni.previewImage({
			urls: ['https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/bank.jpg'],
		})
		
	}
	const goBack = () => {
		popupRef.value.close()
		setTimeout(()=>{
			uni.navigateBack()
		},100)
	}
	let info = reactive({
		paymentAccount: "",
		paymentTime: "",
		remark: "",
		picList: [],
		id:'',
		submit: async () => {
			let warning = ''
			//去除打款账号
			// if (info.paymentAccount.trim().length == 0) {
			// 	warning = '打款账号不能为空'
			// } else 
			if (info.paymentTime.trim().length == 0) {
				warning = '打款时间不能为空'
			} else if (info.picList.length < 1) {
				warning = '请上传打款截图'
			}
			if (warning) {
				uni.showToast({
					icon: 'none',
					title: warning
				})
				return
			}
			let params = {
				paymentAccount: info.paymentAccount,
				paymentTime: info.paymentTime,
				paymentScreenshot: info.picList.join(','),
				remarks: info.remark,
				transferAmount:bankConfig.value.money,
				id:info.id
			}
			console.log(params)
			const res : any = await api({
				method: 'post',
				url: '/mall/studio/apply-studio-record/uploadPayment',
				data: params
			})
			if (res.code == 0 && res.data) {
				uni.showToast({
					mask: true,
					icon: 'none',
					title: '提交成功！',
					duration: 2000
				})
				if(latestRecords.value.applicationInfoReasonFlag==1&&latestRecords.value.status==4){
					popupRef.value.open()
					return
				}else if(latestRecords.value.applicationInfoReasonFlag==0&&latestRecords.value.status==4){
					setTimeout(() => {
						uni.switchTab({
							url:'/pages/user/index'
						})
					}, 1800)
				}else{
					setTimeout(() => {
						uni.navigateBack()
					}, 1800)
				}
				
			} else {
				uni.showToast({
					mask: true,
					icon: 'none',
					title: res.msg
				})
			}
		}
	})
</script>
<style lang="scss" scoped>
	.textTitleTop{
		font-size: 28rpx;
		color: var(--color-primary);
		margin-bottom: 24rpx;
	}
	.goBack{
		width: 480rpx;
		margin: 48rpx auto;
	}
	.lf {
		display: flex;
	}
	.lf-between {
		justify-content: space-between;
	}
	.payment-form-right{
		font-size: 28rpx;
		color: var(--color-primary);
	}
	.u-color-192{
		color: #b2b2b2;
	}
	input::input-placeholder{
		color: #b2b2b2;
	}
	.reviewFailed{
		width: 686rpx;
		background-color: #ffffff;
		margin: 32rpx auto;
		border-radius: 24rpx;
		padding: 80rpx 0;
		
		image{
			display: block;
			width: 96rpx;
			height: 96rpx;
			margin: 0 auto;
		}
		.failed_text{
			font-size: 36rpx;
			font-weight: bold;
			margin-top: 48rpx;
			text-align: center;
		}
		.copywriting{
			color: #7C807F;
			font-size: 28rpx;
		}
		.failed_details{
			width: 636rpx;
			margin: 32rpx auto;
			text-align: center;
			color: #5C5E5E;
			font-size: 30rpx;
		}
		.goModify{
			width: 408rpx;
			margin: 0 auto;
		}
		.failed_label_box{
			border: 1px solid #E4E6E6;
			margin:0 32rpx;
			margin-top: 24rpx;
		}
		.failed_left_box{
			width: 8rpx;
			height: 24rpx;
			background: #FF6084;
			border-radius: 4rpx;
			margin-right: 4rpx;
		}
		.failed_one_label_bottom{
			 border-bottom: 1px solid #E4E6E6;
		}
		.failed_one_label{
			// border-top: 1px solid #E4E6E6;
			display: flex;
		}
		.failed_one_label_left{
			width: 160rpx;
			padding: 32rpx 0;
			border-right: 1rpx solid #E4E6E6;
			font-size: 26rpx;
			color: #5C5E5E;
		}
		.failed_one_label_center{
			width: 330rpx;
			padding: 32rpx 0;
			word-break: break-all;
			font-size: 26rpx;
			color: #5C5E5E;
		}
		.failed_two_label{
			
			display: flex;
		}
		.failed_two_label_left{
			width: 458rpx;
			padding: 32rpx 0;
			font-size: 26rpx;
			color: #5C5E5E;
		}
		.failed_three_label{
			border-top: 1px solid #E4E6E6;
			
			display: flex;
		}
		.failed_three_label_left{
			width: 458rpx;
			padding: 32rpx 0;
			font-size: 26rpx;
			color: #5C5E5E;
		}
		.go_modify_text{
			width: 165rpx;
			color: #5C5E5E;
			border-left: 1px solid #E4E6E6;
			padding: 32rpx 0;
			font-size: 26rpx;
			text-align: center;
			
		}
		.go_modify{
			width: 165rpx;
			color: #FF6084;
			border-left: 1px solid #E4E6E6;
			padding: 32rpx 0;
			font-size: 26rpx;
			text-align: center;
			text{
				text-decoration: underline;
			}
		}
	}
	.payment-container {
		padding: 30rpx;
		box-sizing: border-box;

		.company-info {
			background-color: #ffffff;
			border-radius: 12rpx;
			padding: 30rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;

			.section-title {
				font-size: 30rpx;
				color: #333333;
				margin-bottom: 30rpx;
			}

			.info-item:last-child {
				margin-bottom: 0;
			}

			.info-item {
				margin-bottom: 24rpx;
				display: flex;
				align-items: flex-start;

				.label {
					width: 140rpx;
					font-size: 28rpx;
					color: #666666;
					flex-shrink: 0;
				}

				.value-box {
					flex: 1;
					display: flex;
					justify-content: space-between;

					.value {
						font-size: 28rx;
						color: #333333;
					}

					.copy-icon {
						flex-shrink: 0;
						font-size: 28rpx;
						padding-left: 12rpx;
						color: var(--color-primary);
					}
				}
			}
		}

		.payment-form {
			background-color: #ffffff;
			border-radius: 12rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;

			.form-item:last-child {
				margin-bottom: 0;
			}

			.form-item {
				margin-bottom: 30rpx;

				.select-box {
					height: 88rpx;
					background-color: #f8f8f8;
					border-radius: 8rpx;
					padding: 0 24rpx;
					margin-top: 16rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 28rpx;
				}

				.label {
					font-size: 28rpx;
					color: #666666;
				}
				.input_time{
					height: 88rpx;
					line-height: 88rpx;
					background-color: #f8f8f8;
					border-radius: 8rpx;
					font-size: 28rpx;
					color: #b2b2b2;
					margin-top: 16rpx;
				}
				.input {
					display: block;
					height: 88rpx;
					line-height: 88rpx;
					background-color: #f8f8f8;
					border-radius: 8rpx;
					padding: 0 24rpx;
					font-size: 28rpx;
					color: #333333;
					margin-top: 16rpx;
				}

				.textarea {
					height: 160rpx;
					width: 100%;
					box-sizing: border-box;
					background-color: #f8f8f8;
					border-radius: 8rpx;
					padding: 24rpx;
					font-size: 28rpx;
					color: #333333;
					margin-top: 16rpx;
				}
			}
		}

		.upload-section {
			background-color: #ffffff;
			border-radius: 12rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;

			.section-title {
				font-size: 30rpx;
				color: #333333;
				margin-bottom: 30rpx;
			}

			.upload_tips {
				margin-top: 24rpx;
				font-size: 26rpx;
				color: #5C5E5E;
			}
		}

		.pop {
			background-color: #fff;
			padding: 12rpx 32rpx;

			.line {
				text-align: center;
				font-size: 32rpx;
				padding: 32rpx 0;
				border-bottom: 1rpx solid var(--pages-bg-color);
			}

			.line:last-child {
				border-bottom: 0;
			}
		}
		.register {
			// padding: 0 40rpx calc(var(--safe-area-bottom) + 5rpx);
			padding: 0 40rpx 60rpx;
			box-sizing: border-box;
			position: relative;
			width: 686rpx;
			background-color: #fff;
			border-radius: 24rpx;
		
			image {
				width: 100%;
			}
		
			&-title {
				text-align: center;
				font-weight: bold;
				padding: 40rpx 0 80rpx;
			}
		
			.close {
				position: absolute;
				top: 40rpx;
				right: 40rpx;
			}
		
			&-mobile {
				height: 128rpx;
				border-radius: 32rpx;
				background-color: #F5F6F7;
				display: flex;
				align-items: center;
				padding: 32rpx;
				box-sizing: border-box;
				margin-bottom: 32rpx;
		
				.code {
					display: flex;
					justify-content: center;
					align-items: center;
				}
		
				>input {
					font-size: 32rpx;
					margin-left: 32rpx;
				}
			}
		
			&-code {
				height: 128rpx;
				border-radius: 32rpx;
				background-color: #F5F6F7;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 32rpx;
				box-sizing: border-box;
				margin-bottom: 80rpx;
		
				>input {
					font-size: 32rpx;
					margin-left: 32rpx;
					width: 300rpx;
				}
		
				.send {
					font-size: 26rpx;
					color: var(--color-primary);
					width: 180rpx;
					text-align: center;
					border-left: 1px solid #7C807F;
				}
			}
		}
	}
</style>